import React                from 'react';
import {connect}            from "react-redux";

import Nav                  from "../../config/Navigator";
import Config               from "../../config";
import NavRight             from "../../components/icon/NavRight";
import {loadAccum}          from "../../actions/store";
import './accumulate.scss';

class Accumulate extends React.Component {

    componentWillMount(){
        document.title = '我的积分';
        this.props.loadAccum();
    }

    goCart(){
        this.props.history.push(Nav.cartList());
    }

    render(){
        var {qr, text, time, accumulate, card = {discount: ''}} = this.props.accum;
        return (
            <div className="accum">
                {/* 绿色版本优惠券 */}
                {/* <div className="a-header flex-avg">
                    <div className={`ah-card important-bg ${Config.INFO.id}`} onClick={() => this.goCart()}>
                        <div className="ah-name">{Config.INFO.name}</div>
                        <div className="ah-id">{qr}</div>
                        <div className="ah-time">{time}</div>
                        <div className="ah-level">{card.name}卡</div>
                        <div className="ah-discount">享<span>{card.discount}</span>折</div>
                    </div>
                    <div className="ah-text">{text}</div>
                </div> */}
                {/* 红色版本优惠券 */}
                <div className="a-header flex-avg">
                    <div className={`ah-card important-bg ${Config.INFO.id}`} onClick={() => this.goCart()}>
                        {/* <div className="ah-id">{qr}</div> */}
                        {/* <div className="ah-time">{time}</div> */}
                        <div className="ah-discount_red">{card.name}卡　享<span>{card.discount}</span>折</div>
                    </div>
                    <div className="ah-text">{text}</div>
                </div>
                <div className="a-body flex-avg">
                    <div className="ab-accum flex-avg">
                        <div>当前积分余额：</div>
                        <div className="ab-accum-txt">{accumulate} 分</div>
                    </div>
                    <div className="ab-btn flex-avg" onClick={() => this.goCart()}>积分当钱花，现在就去用</div>
                </div>
                <div className="a-nav flex-avg" onClick={() => this.props.history.push(Nav.accumulateList())}>
                    <div>积分记录</div>
                    <NavRight size=".32rem"/>
                </div>
                <div className="a-footer">
                    <div className="af-accum">
                        <div className="af-title">积分说明</div>
                        <div>积分原则：每消费现金1元，赠送1积分；</div>
                        <div>1)积分计算以有效购物金额为准， 若会员在支付时采用优惠券，将只针对有效购物金额 （商品金额–优惠券金额）部分进行积分累计；</div>
                        <div>2)会员消费金额中，不满1元部分不进行前后累计积分；</div>
                        <div>3)会员消费积分在交易成功当天记入积分（即累计积分）；</div>
                        <div>4)如发生退换货，将从积分中扣除由于退换货部分产生的积分差额；</div>
                    </div>
                    {/* <div className="af-accum af-accum-l">
                        <div className="af-title">等级说明</div>
                        <div>注册并激活会员立享95折，累计最高享85折，详情如下；</div>
                        <div>1)注册激活会员：铜牌会员，享95折；</div>
                        <div>2)累计消费满500元：银牌会员，享93折；</div>
                        <div>3)累计消费满2000元：金牌会员，享90折；</div>
                        <div>4)累计消费满5000元：钻石会员，享88折；</div>
                        <div>5)累计消费满10000元：皇冠会员，享85折；</div>
                    </div> */}
                </div>
            </div>
        );
    }

}

export default connect(({store: {accum}}) => ({accum}), {loadAccum})(Accumulate);
